<template>
	<div>
		<up-title titleT="slotsSlip.title" icon="winners" iconColor="var(--color-success)" mb />
		<div>
			<div class="flex justify-between items-center" v-if="showTabs">
				<base-switch-tabs
					:modelValue="tab"
					@update:modelValue="handleChangeTab"
					:data="tabList"
					translation
					activeTextBold />
				<!-- <base-popselect
					@update:model-value="handeChangeSize"
					v-model="pageSize"
					selected-class="mr-1 w-[60px] h-[28px] rounded-full bg-bg-3 px-3"
					:options="options"></base-popselect> -->
			</div>
			<base-loading-box
				class="w-full h-full min-h-[458px]"
				:isEmpty="tab === 'casino' ? casinoIsEmpty : isEmpty"
				:error="tab === 'casino' ? casinoError : error"
				:loading="tab === 'casino' ? casinoLoading : loading">
				<live-list :type="tab" :list="list" :cols="cols" />
			</base-loading-box>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import LiveList from './live-list.vue'
import { BaseLoadingBox, BaseSwitchTabs, SwitchTabsType } from '@/components/base'
import { UpTitle } from '@/components/up'
import { liveBigReq } from '@/api/slots'
import { casinoLiveBigReq } from '@/api/casino'
import { useSlotStore, useCasinoStore } from '@/store'
import { useRequest } from '@/hooks'

const props = defineProps({
	defaultTab: {
		type: String,
		default: 'slots'
	},
	showTabs: {
		type: Boolean,
		default: true
	}
})

// const options = [
// 	{
// 		text: '10',
// 		id: 10
// 	},
// 	{
// 		text: '20',
// 		id: 20
// 	},
// 	{
// 		text: '30',
// 		id: 30
// 	},
// 	{
// 		text: '40',
// 		id: 40
// 	},
// 	{
// 		text: '50',
// 		id: 50
// 	}
// ]

const slotStore = useSlotStore()
const casinoStore = useCasinoStore()
// const list = ref([])
const pageSize = ref(10)
const tab = ref(props.defaultTab)

const list = computed(() => {
	if (tab.value === 'casino') {
		return casinoStore.liveBigDataList
	} else if (tab.value === 'slots') {
		return slotStore.liveBigDataList
	}
	return []
})

const tabList: SwitchTabsType = [
	// {
	// 	id: 'sport',
	// 	name: 'app.sports',
	// 	icon: ''
	// },
	{
		id: 'slots',
		name: 'app.slots',
		icon: ''
	},
	{
		id: 'casino',
		name: 'app.casino',
		icon: ''
	}
]
const cols = ref([
	{
		prop: 'game',
		textT: 'slotsSlip.game',
		span: 4
	},
	{
		prop: 'user',
		textT: 'slotsSlip.owner',
		span: 2
	},
	{
		prop: 'bet',
		textT: 'slotsSlip.betAmount',
		span: 2,
		align: 'right'
	},
	{
		prop: 'multiplier',
		textT: 'slotsSlip.multiplier',
		span: 2,
		align: 'right'
	},
	{
		prop: 'payout',
		textT: 'slotsSlip.payOut',
		span: 2,
		align: 'right'
	}
])

const handleChangeTab = (val: string) => {
	if (val !== tab.value) {
		tab.value = val
		getListData()
	}
}

// const handeChangeSize = (val: any) => {
// 	console.log(val)
// 	pageSize.value = val
// 	getListData()
// }

const { run, data, loading, isEmpty, error } = useRequest<any>(liveBigReq)

const {
	run: casinoRun,
	data: casinoData,
	loading: casinoLoading,
	isEmpty: casinoIsEmpty,
	error: casinoError
} = useRequest<any>(casinoLiveBigReq)

const getListData = async () => {
	if (tab.value === 'slots') {
		slotStore.setLiveBigWinnersList([])
		// const { data } = await liveBigReq({
		// 	page: 1,
		// 	pageSize: pageSize.value
		// })
		await run({
			page: 1,
			pageSize: pageSize.value
		})
		slotStore.setLiveBigWinnersList(data.value)
	} else if (tab.value === 'casino') {
		casinoStore.setLiveBigWinnersList([])
		// const { data } = await casinoLiveBigReq({
		// 	page: 1,
		// 	pageSize: pageSize.value
		// })
		await casinoRun({
			page: 1,
			pageSize: pageSize.value
		})
		casinoStore.setLiveBigWinnersList(casinoData.value)
	}
}

onMounted(() => {
	getListData()
})
</script>
